<template>
  <div class="main">
    <div class="swiper-body">
      <div class="swiper-hot">
        <div class="hot-top">
          <h2 class="hot-text"></h2>
        </div>
      </div>
      <div class="RankingList">
        <div class="Rank-list bg-position1">
          <div>
            <div class="Rank-top">
              <div class="SummitList">巅 峰 榜</div>
              <div class="SummitText">热 歌</div>
            </div>
            <div class="topicon">
              <i class="toplist_play"></i>
              <i class="toplist_line"></i>
            </div>
            <ul class="toplist__songlist">
              <li v-for="(hot, hotIndex) in hotRank" :key="hot.id">
                <span>{{ hotIndex + 1 }}</span>
                <span>{{ hot.name }}</span>
                <div>{{ hot.author }}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="Rank-list bg-position2">
          <div>
            <div class="Rank-top">
              <div class="SummitList">巅 峰 榜</div>
              <div class="SummitText">新 歌</div>
            </div>
            <div class="topicon">
              <i class="toplist_play"></i>
              <i class="toplist_line"></i>
            </div>
            <ul class="toplist__songlist">
              <li v-for="(newItem, newIndex) in newRank" :key="newItem.id">
                <span>{{ newIndex + 1 }}</span>
                <span>{{ newItem.name }}</span>
                <div>{{ newItem.author }}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="Rank-list bg-position3">
          <div>
            <div class="Rank-top">
              <div class="SummitList">巅 峰 榜</div>
              <div class="SummitText">流行指数</div>
            </div>
            <div class="topicon">
              <i class="toplist_play"></i>
              <i class="toplist_line"></i>
            </div>
            <ul class="toplist__songlist">
              <li v-for="(up, upIndex) in upRank" :key="up.id">
                <span>{{ upIndex + 1 }}</span>
                <span>{{ up.name }}</span>
                <div>{{ up.author }}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="Rank-list bg-position4">
          <div>
            <div class="Rank-top">
              <div class="SummitList">巅 峰 榜</div>
              <div class="SummitText">欧 美</div>
            </div>
            <div class="topicon">
              <i class="toplist_play"></i>
              <i class="toplist_line"></i>
            </div>
            <ul class="toplist__songlist">
              <li v-for="(eu, euIndex) in euRank" :key="eu.id">
                <span>{{ euIndex + 1 }}</span>
                <span>{{ eu.name }}</span>
                <div>{{ eu.author }}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="Rank-list bg-position5">
          <div>
            <div class="Rank-top">
              <div class="SummitList">巅 峰 榜</div>
              <div class="SummitText">韩 国</div>
            </div>
            <div class="topicon">
              <i class="toplist_play"></i>
              <i class="toplist_line"></i>
            </div>
            <ul class="toplist__songlist">
              <li v-for="(kr, krIndex) in krRank" :key="kr.id">
                <span>{{ krIndex + 1 }}</span>
                <span>{{ kr.name }}</span>
                <div>{{ kr.author }}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RankingHome',
}
</script>

<script setup>
import { onMounted, ref } from 'vue'
import { getRankingList } from '@/api/Home'

// 3778678 热歌榜单
const hotRank = ref([])
// 3779629 新歌榜单
const newRank = ref([])
// 19723756 飙升榜单
const upRank = ref([])

// 2809513713 欧美榜单
const euRank = ref([])
// 745956260 韩国榜单
const krRank = ref([])

const getRank = async id => {
  const result = await getRankingList(id)
  if (result.code === 200) {
    const songs = result.songs.map(item => {
      return {
        id: item.al.id,
        name: item.al.name,
        author: item.ar.map(item => item.name).join('/'),
      }
    })
    switch (id) {
      case 3778678:
        hotRank.value = songs
        break
      case 3779629:
        newRank.value = songs
        break
      case 19723756:
        upRank.value = songs
        break
      case 2809513713:
        euRank.value = songs
        break
      case 745956260:
        krRank.value = songs
        break
      default:
        break
    }
  }
}

onMounted(() => {
  getRank(3778678)
  getRank(3779629)
  getRank(19723756)
  getRank(2809513713)
  getRank(745956260)
})
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 680px;
  background: url('../img/bg.png') 50% 0 repeat-x;
}
.swiper-body {
  width: 1200px;
  margin: 0px auto;
}
.swiper-hot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .hot-top {
    margin-top: 50px;
    width: 100%;

    .hot-text {
      background-image: url('../img/index_tit5.png');
      background-size: 100%;
      display: block;
      margin: 0 auto;
      width: 196px;
      height: 40px;
      background-position: 0 -200px;
    }
  }
}

.RankingList {
  display: flex;
  justify-content: space-between;
  padding: 50px 20px;
  box-sizing: border-box;
  .Rank-list {
    width: 224px;
    height: 430px;
    border: 1px solid red;
    padding-top: 50px;
    background-image: url('../img/bg_Rank.jpg');
    .Rank-top {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      .SummitList {
        font-size: 22px;
        height: 36px;
        line-height: 36px;
        font-weight: 400;
      }
      .SummitText {
        font-size: 26px;
        cursor: pointer;
        height: 36px;
        font-weight: 700;
        line-height: 36px;
      }
    }
  }
  .bg-position1 {
    background-position: 0 0;
  }
  .bg-position2 {
    background-position: 0 0;
  }
  .bg-position3 {
    background-position: -224px 0;
  }
  .bg-position4 {
    background-position: -448px 0;
  }
  .bg-position5 {
    background-position: -896px 0;
  }
  .topicon {
    position: relative;
    width: 100%;
    height: 70px;
    .toplist_line {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -18px;
      opacity: 1;
      display: block;
      width: 36px;
      height: 2px;
      background: #fff;
    }
    .toplist_play {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -25px;
      margin-top: -25px;
      opacity: 0;
      display: block;
      width: 50px;
      height: 50px;
      background: url('../img/player.png');
      background-size: 61%;
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(1.5) translateZ(0);
      transition-property: opacity, transform;
      transition-duration: 0.5s;
      cursor: pointer;
    }
  }

  .toplist__songlist {
    padding: 20px;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    li {
      margin-top: 20px;
      box-sizing: border-box;
      cursor: pointer;
      span {
        margin: 5px;
      }
      div {
        width: 100%;
        text-align: left;
        padding-left: 25px;
        box-sizing: border-box;
      }
    }
  }
  .bg-position1:hover .toplist_play {
    opacity: 1;
  }
  .bg-position1:hover .toplist_line {
    opacity: 0;
  }

  .bg-position2:hover .toplist_play {
    opacity: 1;
  }
  .bg-position2:hover .toplist_line {
    opacity: 0;
  }
  .bg-position3:hover .toplist_play {
    opacity: 1;
  }
  .bg-position3:hover .toplist_line {
    opacity: 0;
  }
  .bg-position4:hover .toplist_play {
    opacity: 1;
  }
  .bg-position4:hover .toplist_line {
    opacity: 0;
  }
  .bg-position5:hover .toplist_play {
    opacity: 1;
  }
  .bg-position5:hover .toplist_line {
    opacity: 0;
  }
}
</style>
